<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" width="300" height="100"></canvas>
	</body>
	<script>
		var canvas = document.getElementById('canvas')
		var cxt = canvas.getContext('2d')

		//生成一个随机颜色
		function randomColor() {
			var r = Math.floor(Math.random() * 200)
			var g = Math.floor(Math.random() * 200)
			var b = Math.floor(Math.random() * 200)
			return "rgb(" + r + "," + g + "," + b + ")"
		}
		
		//生成随机数
		function randomNum(min, max) {
			return Math.floor(Math.random() * (max - min) + min)
		}

		//背景色的绘制
//		cxt.fillStyle = "antiquewhite"
		cxt.fillStyle = randomColor()
		cxt.fillRect(0, 0, canvas.width, canvas.height)
		
		//绘制文本
		var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
		var txt = str[randomNum(0,str.length)]
		
		cxt.fillStyle = randomColor()
		cxt.font = "50px 微软雅黑"
		var x = 50
		var y = 50
		cxt.save()
		cxt.translate(x,y)
		var deg = randomNum(-45, 45)
		cxt.rotate(deg * Math.PI / 180)
		cxt.fillText(txt, 0, 0)
		cxt.restore()
		
		var txt = str[randomNum(0,str.length)]
		cxt.fillStyle = randomColor()
		cxt.font = "50px 微软雅黑"
		var x = 100
		var y = 50
		cxt.save()
		cxt.translate(x,y)
		var deg = randomNum(-45, 45)
		cxt.rotate(deg * Math.PI / 180)
		cxt.fillText(txt, 0, 0)
		cxt.restore()
		
		var txt = str[randomNum(0,str.length)]
		cxt.fillStyle = randomColor()
		cxt.font = "50px 微软雅黑"
		var x = 150
		var y = 50
		cxt.save()
		cxt.translate(x,y)
		var deg = randomNum(-45, 45)
		cxt.rotate(deg * Math.PI / 180)
		cxt.fillText(txt, 0, 0)
		cxt.restore()
		
		var txt = str[randomNum(0,str.length)]
		cxt.fillStyle = randomColor()
		cxt.font = "50px 微软雅黑"
		var x = 200
		var y = 50
		cxt.save()
		cxt.translate(x,y)
		var deg = randomNum(-45, 45)
		cxt.rotate(deg * Math.PI / 180)
		cxt.fillText(txt, 0, 0)
		cxt.restore()
		
		for(var i = 0; i < 100; i++) {
			cxt.fillStyle = randomColor()
			cxt.beginPath()
			cxt.arc(randomNum(0, canvas.width), randomNum(0, canvas.height), 2, 0, 2*Math.PI)
			cxt.fill()
			cxt.closePath()
		}
		
		for(var i = 0; i < 20; i++) {
			cxt.strokeStyle = randomColor()
			cxt.beginPath()
			cxt.moveTo(randomNum(0, canvas.width), randomNum(0, canvas.height))
			cxt.lineTo(randomNum(0, canvas.width), randomNum(0, canvas.height))
			cxt.stroke()
			cxt.closePath()
		}
	</script>

</html>